import { useEffect, useState } from 'react'
import { Button } from 'tdesign-react'
import { getSexIcon, getLvIcon } from '@/apps/bilibili/utils/GetUserInfoIcon'
import { FormatNumber } from '@/utils/common'
import { ApiRequest, apis } from '@/service'
const {
  user: {
    getUserCard
  },
} = apis.BilibiliService
const UpCard = (props: any) => {

  const { upInfo, userId } = props
  const [userInfo, setUserInfo] = useState<any>(upInfo)

  useEffect(() => {
    if (userId) {
      // 传id的情况自己查询userCard
      getUserCardFnc()
    }
  }, [userId])

  const getUserCardFnc = () => {
    const params = {
      mid: userId,
      photo: true
    }
    ApiRequest({ api: getUserCard, params }).then((res: any) => {
      setUserInfo(res.data)
    })
  }

  const toCancelFollow = () => {
    // TODO：取消关注
  }

  const toFollow = () => {
    // TODO：关注
  }

  return <div className='bl-upCardBlock'>
    <img src={userInfo?.space?.s_img} alt="暂时无法显示" style={{ borderRadius: '10px 10px 0 0', marginLeft: 2 }} />
    <div className={'bl-upCard'}>
      <img className={'bl-avatar'} src={userInfo?.card?.face} alt="暂时无法显示" />
      <div className={'bl-upDesc'}>
        <div className={'bl-upName'}>{userInfo?.card?.name}{getSexIcon(userInfo?.card?.sex)}{getLvIcon(userInfo?.card?.level)}</div>
        <div className={'bl-upStat'}>
          <div style={{ marginRight: 5 }}>{FormatNumber(userInfo?.card?.attention)}</div>
          <div className={'bl-graySmallPrint'}>{'关注'}</div>
          <div style={{ marginRight: 5 }}>{FormatNumber(userInfo?.follower)}</div>
          <div className={'bl-graySmallPrint'}>{'粉丝'}</div>
          <div style={{ marginRight: 5 }}>{FormatNumber(userInfo?.like_num)}</div>
          <div className={'bl-graySmallPrint'}>{'获赞'}</div>
        </div>
        <div className={'bl-graySmallPrint bl-upSign'}>{userInfo?.card?.sign}</div>
        <div className={'bl-upStat'}>{userInfo?.following ? <Button onClick={toCancelFollow}>{`关注`}</Button> : <Button onClick={toFollow} theme="default" variant="base" >{`取消关注`}</Button>}
          <Button onClick={toFollow} style={{ marginLeft: 20 }} theme="default" variant="base" >{`发消息`}</Button></div>
      </div>
    </div>
  </div>
}

export default UpCard
